<template>
  <div class="warp_auto">
      <div class="warp_top">
        <div class="jiansuo-box">
          <span class="span_top">手术名称：</span>
          <el-input
            v-model="name"
            class="input"
            placeholder="请输入手术名称"
          />
        </div>
        <el-button
          type="primary"
          icon="el-icon-search"
          class="btn"
          @click="btn"
        >检索</el-button>
      </div>

      <!--模板（表格）-->
      <el-card>
        <el-table
          :data="arrlist"
          style="width: 100%"
          height="540"
          stripe
          :header-cell-style="{ background: '#d2e0f9', color: '#606266' }"
        >
          <el-table-column
            type="index"
            min-width="5%"
            label="序号"
            align="center"
          />
          <el-table-column label="手术名称" min-width="20%" align="center">
            <template slot-scope="scope">
            <span style="margin-left: 10px">{{
                scope.row.operation_name
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="手术编号" min-width="15%" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.apply_no }}</span>
            </template>
          </el-table-column>
          <el-table-column label="手术申请日期" min-width="20%" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.apply_time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" min-width="20%">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.remark=="null,"?"": scope.row.remark}}</span>
            </template>
          </el-table-column>
          <el-table-column label="手术创建时间" align="center" min-width="20%">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.create_time}}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="paging">
          <el-pagination
            :current-page="start"
            :page-size="PageSize"
            :pager-count="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>
</template>

<script>
import axios from 'axios'
import {
  queryOperationQueryList
} from '@/api/table'
import { MessageBox, Message } from 'element-ui'

export default {
  data() {
    return {
      arrlist: [],
      data:{},
      name:"",
      patientId:"",
      start: 1, // 默认显示第几页
      totalCount: 0, // 总条数，根据接口获取数据长度(注意 : 这里不能为空)
      totalCounts:0,
      pgeSizes: [10, 20, 30, 40], // 个数选择器（可修改）
      PageSize: 10, // 默认每页显示的条数（可修改）
    }
  },
  computed: {
    getData() {
      return this.$store.state.user.severFall;
    },
  },
  watch: {
    getData: {
      handler(nVal) {
        this.data = this.$store.state.user.severFall;
        this.btn();
      },
      deep: true,
    },
  },
  mounted() {
    this.btn();
  },
  methods: {
    // 搜索按钮
    btn() {
      this.data = this.$store.state.user.severFall;
      if (
        typeof this.data.patient_id != "string" ||
        this.data.patient_id.length < 1
      ) {
        alert("请选择一次病人");
      } else {
        this.patientId=this.data.patient_id;
        this.start = 1;
        if(this.data.unplanned=="" || this.data.unplanned==null || this.data.unplanned==0){
          this.$message({
            message: "请在首页补全患者信息",
            type: "warning",
            duration: 1500
          });
        }else{
          this.queryOperationQueryList(this.PageSize, this.start)
        }
      }
    },
    //手术信息检索
    queryOperationQueryList(pageSize, start) {
      queryOperationQueryList({
        size: pageSize,
        start: start,
        content: this.name,
        patientId: this.patientId,
        status: 1
      }).then((res) => {
        this.arrlist = res.data
        this.totalCounts = res.totalCount
      })
    },
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val
      this.start = 1
      this.queryOperationQueryList(this.PageSize, this.start) // 模板
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.start = val
      //先判断开关再判断请求
      this.queryOperationQueryList(this.PageSize, this.start) // 模板
    },
  }
}
</script>
